@mixin transitions($args) {
  transition:$args;
  -webkit-transition:$args;
  -moz-transition:$args;
  -o-transition:$args;
  -ms-transition:$args;
}
.slide {
  & .slide-content{
    position: absolute;
    top: 0;
    left: 0;
    & .css3{
      @include transitions(.3s);
    }
  }
  & .slider-item-wrapper{
    position: absolute;
    bottom: 10px;
    text-align: center;
    z-index: 100;
    width: 100%;
    & ul{
      display: inline-block;
      padding: 2px 15px;
      border-radius: 10px;
      background-color:rgba(255,255,255,0.6);
      & li{
        width: 12px;
        height: 12px;
        background: rgba(255,255,255,0.5);
        border-radius:10px;
        display: inline-block;
        cursor: pointer;
        @include transitions(.3s);
        &+li{margin-left: 10px;}
        &.active{
          width:30px;background-color:#333 ;
        }
      }
    }
  }
  & .slider-prev{
    position: absolute;
    height: 60px;
    width: 30px;
    left: 10px;
    background:rgba(255,255,255,0.1) url(../images/icon/icon-left.png) center center no-repeat;
    background-size: 16px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    z-index: 100;
  }
  & .slider-next{
    position: absolute;
    height: 60px;
    width: 30px;
    right: 10px;
    background: rgba(255,255,255,0.1) url(../images/icon/icon-right.png) center center no-repeat;
    background-size: 16px;
    top: 50%;
    margin-top: -30px;
    z-index: 100;
      cursor: pointer;
  }
}
